<template>
  <div class="app-container">
    <el-card :bordered="false">
      <el-form ref="formValidate" :rules="ruleValidate" :model="formValidate" label-width="130px">
        <el-row :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="name">
              <el-input v-model="formValidate.name" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品分类：" prop="category_id">
              <el-select v-model="formValidate.category_id" filterable clearable>
                <el-option v-for="item in optionsMetaShow" :disabled="item.disabled === 0"
                           :value="item.id" :key="item.id" :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：" prop="">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit_name">
              <el-input v-model="formValidate.unit_name" placeholder="请输入单位"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="short_info">
              <el-input v-model="formValidate.short_info" type="textarea" :rows="3" placeholder="请输入商品简介"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品封面图：" prop="image">
              <single-pic v-model="formValidate.image" type="image" :num="1" :width="150" :height="150"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="slider_image">
              <MaterialList v-model="formValidate.slider_image" type="image" :num="4" :width="150" :height="150"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品规格：" props="spec_type">
              <el-radio-group v-model="formValidate.spec_type" @change="changeSpec">
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1">多规格</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col :span="24" v-if="formValidate.spec_type === 1" class="noForm">
            <el-col :span="24">
              <el-form-item label="选择规格：" prop="">
                <div class="acea-row row-middle">
                  <el-select v-model="formValidate.selectRule" style="width: 23%;">
                    <el-option v-for="(item, index) in ruleList" :value="item.name" :key="index">{{
                        item.name
                      }}
                    </el-option>
                  </el-select>
                  <el-button type="primary" class="mr20" @click="confirm">确认</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="attrs.length!==0">
                <div v-for="(item, index) in attrs" :key="index">
                  <div class="acea-row row-middle"><span class="mr5">{{ item.value }}</span>
                    <i class="el-icon-circle-close" @click="handleRemoveRole(index)"></i>
                  </div>
                  <div class="rulesBox">
                    <el-tag type="dot" closable color="primary" v-for="(j, index) in item.detail" :key="index" :name="j"
                            class="mr20" @close="handleRemove2(item.detail,index)"
                    >{{ j }}
                    </el-tag>
                    <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
                              style="width: 150px"
                    >
                      <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加
                      </el-button>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="createBnt">
              <el-form-item>
                <el-button type="primary" icon="md-add" @click="addBtn" class="mr15">添加新规格</el-button>
                <el-button type="success" @click="generate">立即生成</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="showIput">
              <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格：">
                  <el-input placeholder="请输入规格" v-model="formDynamic.attrsName"/>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值"/>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">

                <el-button type="primary" @click="createAttrName">确定</el-button>
                <el-button type="danger" @click="offAttrName">取消</el-button>

              </el-col>
            </el-col>
            <!-- 多规格设置-->
            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"
                    v-if="manyFormValidate.length && formValidate.header.length!==0 && attrs.length!==0"
            >
              <!-- 多规格表格-->
              <el-col :span="24">
                <el-form-item label="商品属性：" class="labeltop">
                  <el-table :data="manyFormValidate" size="small" fix="true" style="width: 90%;">
                    <el-table-column type="myindex" v-for="(item,index) in formValidate.header" :key="index"
                                     :label="item.title" :property="item.slot" align="center"
                    >
                      <template slot-scope="scope">
                        <div v-if="scope.column.property == 'pic'" align="center">
                          <single-pic v-model="scope.row[scope.column.property]" type="image" :num="1" :width="100"
                                      :height="60"
                          />
                        </div>
                        <div v-else-if="scope.column.property === 'price'" align="center">
                          <el-input-number v-model="scope.row[scope.column.property]" size="small" controls-position="right" align="center"/>
                        </div>
                        <div v-else-if="scope.column.property === 'cost_price'" align="center">
                          <el-input-number v-model="scope.row[scope.column.property]" controls-position="right" align="center"/>
                        </div>
                        <div v-else-if="scope.column.property === 'market_price'" align="center">
                          <el-input-number v-model="scope.row[scope.column.property]" controls-position="right" align="center"/>
                        </div>
                        <div v-else-if="scope.column.property === 'stock'" align="center">
                          <el-input-number v-model="scope.row[scope.column.property]" controls-position="right" align="center"/>
                        </div>
                        <div v-else-if="scope.column.property === 'weight'" align="center">
                          <el-input-number v-model="scope.row[scope.column.property]" controls-position="right" align="center"/>
                        </div>
                        <div v-else-if="scope.column.property.indexOf('value') !== -1" align="center">
                          {{ scope.row[scope.column.property] }}
                        </div>
                        <div v-else-if="scope.column.property === 'action'" align="center">
                          <a @click="delAttrTable(scope.$index)" align="center">删除</a>
                        </div>
                        <div v-else align="center">
                          <el-input v-model="scope.row[scope.column.property]" align="center"/>
                        </div>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
          <!-- 单规格表格-->
          <el-col :xl="23" :lg="24" :md="24" :sm="24" :xs="24" v-if="formValidate.spec_type === 0">
            <el-form-item>
              <el-table :data="oneFormValidate" size="small" style="width: 90%;">
                <el-table-column prop="pic" label="图片" align="center">
                  <template slot-scope="scope">
                    <single-pic v-model="scope.row.pic" type="image" :num="1" :width="60" :height="60"/>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center">
                  <template slot-scope="scope">
                    <el-input-number  v-model="scope.row.price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="cost_price" label="成本价" align="center">
                  <template slot-scope="scope">
                    <el-input-number type="text" v-model="scope.row.cost_price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="market_price" label="市场价" align="center">
                  <template slot-scope="scope">
                    <el-input-number type="text" v-model="scope.row.market_price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center">
                  <template slot-scope="scope">
                    <el-input-number  v-model="scope.row.stock"/>
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量（KG）" align="center">
                  <template slot-scope="scope">
                    <el-input-number  v-model="scope.row.weight"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <ueditor-wrap v-model="formValidate.description" :config="myConfig" @beforeInit="addCustomDialog"
                            style="width: 90%;"
              ></ueditor-wrap>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-bind="grid">
            <el-form-item label="排序：">
              <el-input-number :min="0" v-model="formValidate.sort" placeholder="请输入排序"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="商品状态：">
              <el-radio-group v-model="formValidate.status">
                <el-radio :label="1" class="radio">上架</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getSelectCategoryList } from '@/api/product/category'
import { getList as getSpecificationList, formatSpecification } from '@/api/product/specifications'
import { add, edit, info } from '@/api/product/product'
import editor from '../../components/Editor.vue'
import picUpload from '@/components/pic-upload/index.vue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MaterialList from '@/components/material/index.vue'
import singlePic from '@/components/singlematerial/index.vue'
import UeditorWrap from 'vue-ueditor-wrap'

export default {
  components: { editor, picUpload, Treeselect, MaterialList, UeditorWrap, singlePic },
  data() {
    return {
      id: 0,
      spinShow: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24
      },
      // 批量设置表格data
      oneFormBatch: [
        {
          pic: '',
          price: 0,
          stock: 0,
          bar_code: '',
          weight: 0,
          volume: 0,
          integral: 0
        }
      ],
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      formDynamicNameData: [],
      isBtn: false,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: ''
      },
      columns: [],
      formValidate: {
        name: '',
        category_id: '',
        keyword: '',
        unit_name: '',
        short_info: '',
        image: '',
        slider_image: [],
        description: '',
        sort: 0,
        status: 1,
        id: 0,
        spec_type: 0,
        attrs: [],
        attrs_items: [],
        cost_price:0,
        market_price:0,
      },
      ruleList: [],
      templateList: [],
      createBnt: false,
      showIput: false,
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          pic: '',
          price: 0,
          stock: 0,
          weight: 0,
          cost_price: 0,
          market_price: 0,
        }
      ],
      images: [],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false,
      treeSelect: [],
      optionsMetaShow: [],
      tableIndex: 0,
      ruleValidate: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        keyword: [
          { required: true, message: '请输入商品关键字', trigger: 'blur' }
        ],
        short_info: [
          { required: true, message: '请输入商品简介', trigger: 'blur' }
        ],
        spec_type: [
          { required: true, message: '请选择商品规格', trigger: 'change' }
        ],
        selectRule: [
          { required: true, message: '请选择商品规格属性', trigger: 'change' }
        ]
      },
      attrs: []
    }
  },
  watch: {
    'formValidate.image': function(val) {
      if (val) {
        this.oneFormValidate.pic = val
      }
    },
    'form.sliderImageArr': function(val) {
      if (val) {
        this.form.slider_image = val.join(',')
      }
    }
  },
  mounted() {
    this.id = Number(this.$route.query.id) || 0
    if (this.id > 0) {
      this.getInfo()
    }
    this.getSelectCategoryList()
    this.getSpecificationList()
  },
  methods: {
    getSelectCategoryList() {
      getSelectCategoryList().then(res => {
        this.optionsMetaShow = res.data
      })
    },
    getSpecificationList() {
      getSpecificationList({ page: 1, size: 10000 }).then(res => {
        this.ruleList = res.data
      })
    },
    confirm() {
      let that = this
      that.createBnt = true
      if (that.formValidate.selectRule.trim().length <= 0) {
        return this.$message({
          message: '请选择属性',
          type: 'error'
        })
      }
      that.ruleList.forEach(function(item, index) {
        if (item.name === that.formValidate.selectRule) {
          that.attrs = item.value
        }
      })
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.manyFormValidate.splice(index, 1)
    },

    // 添加按钮
    addBtn() {
      this.clearAttr()
      this.createBnt = false
      this.showIput = true
    },
    // 立即生成
    generate() {
      formatSpecification({ attrs: this.attrs, id: this.id }).then(res => {
        this.manyFormValidate = res.data.value
        let headerdel = {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 220
        }
        res.data.header.push(headerdel)
        this.formValidate.header = res.data.header
        this.formValidate.attrs = res.data.attrs
        let header = res.data.header
        header.pop()
        if (this.id === 0 && this.formValidate.spec_type === 1) {
          this.manyFormValidate.map((item) => {
            item.pic = this.formValidate.image
          })
          this.oneFormBatch[0].pic = this.formValidate.image
        }
      }).catch(res => {
        // this.$message({
        //   message:res.msg,
        //   type: 'error'
        // });
      })
    },
    // 取消
    offAttrName() {
      this.showIput = false
      this.createBnt = true
    },
    clearAttr() {
      this.formDynamic.attrsName = ''
      this.formDynamic.attrsVal = ''
    },
    // 删除规格
    handleRemoveRole(index) {
      this.attrs.splice(index, 1)
      this.manyFormValidate.splice(index, 1)
    },
    // 删除属性
    handleRemove2(item, index) {
      item.splice(index, 1)
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [
            this.formDynamic.attrsVal
          ]
        }
        this.attrs.push(data)
        var hash = {}
        this.attrs = this.attrs.reduce(function(item, next) {
          hash[next.value] ? '' : hash[next.value] = true && item.push(next)
          return item
        }, [])
        this.clearAttr()
        this.showIput = false
        this.createBnt = true
      } else {
        this.$message.warning('请添加完整的规格！')
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num)
        var hash = {}
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function(item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next)
          return item
        }, [])
      } else {
        this.$message.warning('请添加属性！')
      }
    },

    // 改变规格
    changeSpec() {
    },
    // 详情
    getInfo() {
      let that = this
      info({ id: this.id }).then(async res => {
        let data = res.data
        if (data) {
          this.attrs = data.attrs_items || []
          that.formValidate = data
          that.formValidate.category_id = data.category_id
          that.oneFormValidate = data.attrs
          that.formValidate.header = []
          that.generate()
          that.manyFormValidate = data.attrs
          if (data.spec_type === 0) {
            that.manyFormValidate = []
          } else {
            that.createBnt = true
            that.oneFormValidate = [
              {
                pic: '',
                price: '0',
                stock: '0',
                bar_code: '',
                weight: '0',
                volume: '0',
              }
            ]
          }
        }

        that.treeSelect = res.data.cateList
        that.ruleList = res.data.ruleList
        that.optionsMetaShow = that.treeSelect

      }).catch(res => {
        return this.$message({
          message: res.msg,
          type: 'error'
        })
      })
    },

    // 提交
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formValidate.spec_type === 0) {
            this.formValidate.attrs = this.oneFormValidate
            this.formValidate.header = []
            this.formValidate.attrs_items = []
          } else {
            this.formValidate.attrs_items = this.attrs
            this.formValidate.attrs = this.manyFormValidate
          }
          if (this.formValidate.spec_type === 1 && this.manyFormValidate.length === 0) {
            return this.$message.warning('请点击生成规格！')
          }
          if (this.id === 0) {
            add(this.formValidate).then(async res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              setTimeout(() => {
                this.$router.push({ path: '/product/product' })
              }, 500)
            }).catch(res => {
              // this.$message({
              //   message:res.message,
              //   type: 'error'
              // });
            })
          } else {
            edit(this.formValidate).then(async res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              setTimeout(() => {
                this.$router.push({ path: '/product/product' })
              }, 500)
            })
          }

        } else {
          if (!this.formValidate.name || !this.formValidate.category_id || !this.formValidate.keyword
            || !this.formValidate.unit_name || !this.formValidate.store_info
            || !this.formValidate.image || !this.formValidate.slider_image) {
            this.$message.warning('请填写完整商品信息！')
          }
        }
      })
    },

    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.warning(error)
      }
    },
    addCustomDialog() {
      window.UE.registerUI('yshop', function(editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        })
        this.dialog = dialog

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function() {
            dialog.render()
            dialog.open()
          }
        })

        return btn
      }, 37)
    },

    cancel() {
      this.resetForm()
    }
  }
}
</script>

<style scoped lang="stylus">
.submission {
  margin-left: 10px;
}

.color-list .tip {
  color: #c9c9c9;
}

.color-list .color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
  margin-right: 10px;
}

.color-list .color-item.blue {
  background-color: #1E9FFF;
}

.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}

.color-list .color-item.green {
  background-color: #009688;
}

.columnsBox {
  margin-right: 10px
}

.priceBox {
  width: 100%
}

.rulesBox {
  display: flex;
  flex-wrap: wrap;
}

.curs {
  cursor: pointer
}
</style>
